<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>PoC for BI Apps v0.1</title>
    <link href="api/css/custom-theme/jquery-ui-1.9.2.custom.css" rel="stylesheet">
    <link href="api/js/skin-vista/ui.dynatree.css" rel="stylesheet" type="text/css">
    <script src="api/js/jquery-1.8.3.js"></script>
    <script src="api/js/jquery-ui-1.9.2.custom.js"></script>
    <script src="api/js/jquery.cookie.js" type="text/javascript"></script>
    <script src="api/js/jquery.dynatree.js" type="text/javascript"></script>

    <script>
        $(function(){
            //favorites
            $('#bi_favorites').click(function(){
                var panel = $('#bi_favorites_panel');
                if(panel.is(':visible'))
                    panel.slideUp(500);
                else
                    panel.slideDown(500);
            });

            //navigation
            $('.bi_nav li:gt(0)').click(function(){
                $('div#bi_apps').slideUp();
            });

            $('.bi_nav li:eq(0)').click(function(){
                $('div#bi_apps').slideDown();
            });
        });

    </script>

    <script>
    $(function(){
        $.ui.dynatree.nodedatadefaults["icon"] = false; // Turn off icons by default
        $("#tree").dynatree({
            fx: { height: "toggle", duration: 200 },
            clickFolderMode: 2, // 1:activate, 2:expand, 3:activate and expand
            children: [
                {title: 'Item 1'},
                {title: 'Folder 2', isFolder: true,
                    children: [
                        {title: 'Sub-item 2.1'},
                        {title: 'Sub-item 2.2'}
                    ]
                },
                {title: 'Item 3'}
            ],
            // In real life we would call a URL on the server like this:
            //initAjax: {
            //      url: "http://127.0.0.1/dvb/api/data/report_hier.json"
            //      },
            onActivate: function(node) {

            },
            onPostInit: function()
            {
                $("#tree").dynatree("getRoot").visit(function(node){
                    node.expand(true);
                });
            }

        });
    });
    </script>
    <style>
        body { font-family: Verdana; color:#666666; margin:0; overflow-y: scroll; }
        h4 { margin: 10px;}
        li { border-radius: 10px;}
        div#bi_header { height: 60px; width:100%; background-color: #f1f1f1; border-bottom: solid 1px #aaaaaa;  }
        div#bi_search { height: 60px; padding: 10px; width:900px; margin: 0 auto; text-align:center; }
        div#bi_search input[type="text"]{ padding-left:10px; height: 30px; width: 400px; border: solid 1px #cccccc; line-height: 20px; font-size: 14pt; }
        div#bi_search input[type="text"]:focus{ border: solid 1px #d2691e; }

        div#bi_search input[type="image"] { height: 30px; width: 30px; vertical-align: middle; }
        div#bi_search input[type="image"]:hover { background-color: #fff8dc; box-shadow: 0 0 5px 5px #fff8dc; cursor: pointer; }

        span#bi_favorites { border: solid 1px #f1f1f1; cursor: pointer; width:200px; height:60px; padding: 10px; margin-left:40px; font-size: 12pt; line-height: 40px;}
        span#bi_favorites:hover { /*background-color: #fff8dc;*/ border: solid 1px #cccccc; cursor: pointer; }
        span#bi_favorites img { width:32px; height:32px; margin-right: 10px;  vertical-align: middle; }

        div#bi_main { width: 1000px; margin:0 auto; padding:20px 20px; }
        div#bi_left { width: 230px; float:left; margin-right: 10px;}
        div#bi_right {width: 740px; min-height: 600px; float:left; overflow-x: hidden; border-left: solid 1px #cccccc; padding-left: 10px;}

        div#bi_news { width:240px; max-height:300px; overflow-y: auto; overflow-x: hidden; margin-bottom: 30px;}
        ul.bi_news { list-style: none; padding: 0px; margin: 0px;}
        ul.bi_news li { padding:15px; width:185px;
                        padding-left: 40px; font-size: 10pt; font-weight: normal; color:#3366BB;
                        background-image: url('img/post.png'); background-repeat: no-repeat;
                        background-position: 10px 18px;}
        ul.bi_news li:hover { background-color: #f5f5dc; cursor: pointer; }

        ul.bi_nav { list-style: none; padding: 0px; margin: 0px; }
        ul.bi_nav li { padding:15px; height: 64px;}
        ul.bi_nav li:hover { background-color: #f5f5dc; cursor: pointer; }
        ul.bi_nav li img { width:64px; height: 64px;float:left; margin-right: 10px; }
        ul.bi_nav li div:first-child { width:120px;float:left;}
        ul.bi_nav li div h1 { margin:0px; font-size: 10pt; color:#3366BB; }
        ul.bi_nav li div p { margin:0px; font-size: 8pt; }

        ul.bi_tiles { list-style: none; padding: 0px; }
        ul.bi_tiles li { padding: 15px; margin-bottom: 20px;}
        ul.bi_tiles li:hover { background-color: #f5f5dc; cursor: pointer; }
        ul.bi_tiles li div:first-child { width: 700px; height:160px; }
        ul.bi_tiles li div img { width:160px; height:160px; border:solid 1px #ebebeb; }
        ul.bi_tiles li div div { width: 500px; height:160px; float:right; padding-left: 10px; overflow: hidden; }
        ul.bi_tiles li div div h1 { font-family: 'Century Gothic'; font-weight: normal; margin:0px; font-size: 18pt; color:#3366BB; }
        ul.bi_tiles li div div p { font-size: 12pt; line-height: 16pt; }

        div#bi_favorites_panel { display: none; position: absolute; top:60px; left:700px; max-height: 300px; padding:20px; width:250px;
                                 background-color: #ffffff; border: solid 1px #cccccc; overflow: auto;
                                 box-shadow: 0px 5px 5px 5px rgba(100,100,100,0.2);}


        ul.dynatree-container a
        {
            width:400px;
            padding:10px;
        }

    </style>
</head>
<body>
<div id="bi_header">
    <div id="bi_search">
        <form action="" target="_self">
            Search <input type="text" name="q" />
            <input type="image" src="img/search.png" />
            <span id="bi_favorites">
                <img src="img/favorites.png" />My Favorites
            </span>
        </form>
    </div>
</div>
<div id="bi_main">
    <div id="bi_left">
        <ul class="bi_nav">
            <li>
                <img src="img/report_160.jpg">
                <div>
                    <h1>My BI Applications</h1>
                    <p>Access All Your BI Apps Here</p>
                </div>
            </li>
            <li>
                <img src="img/report_160.jpg">
                <div>
                    <h1>My BW Reports</h1>
                    <p>Access All Your BW Reports Here</p>
                </div>
            </li>
            <li>
                <img src="img/report_160.jpg">
                <div>
                    <h1>Reports Systems</h1>
                    <p>Access All Your BW Reports Here</p>
                </div>
            </li>
            <li>
                <img src="img/report_160.jpg">
                <div>
                    <h1>Utilities</h1>
                    <p>Access All Your BW Reports Here</p>
                </div>
            </li>
        </ul>
        <h4>News</h4>
        <div id="bi_news">
            <ul class="bi_news">
                <li>
                    My News Headline Goes Here
                </li>
                <li>
                    My News Headline Goes Here
                </li>
                <li>
                    My News Headline Goes Here
                </li>
            </ul>
        </div>
    </div>
    <div id="bi_right">
        <div id="bi_apps">
            <h4>My Reports Applications</h4>
            <ul class="bi_tiles">
                <li>
                    <div>
                        <img src="img/app_160.jpg">
                        <div>
                            <h1>BI Application Title Goes Here as a Sample</h1>
                            <p>
                                BI Application Description Goes here. This is a sample description to be displayed in the poc only
                                and has nothing to do with the actual thing. Again, this is for testing purposes and is intended to
                                show how the text fits inside this box. This is a test only and so no need to verify the content. The goal
                                is to check how long text will fit to get an impression of the final look.
                            </p>
                        </div>
                    </div>
                </li>
                <li>
                    <div>
                        <img src="img/app_160.jpg">
                        <div>
                            <h1>BI Application Title Goes Here as a Sample</h1>
                            <p>
                                BI Application Description Goes here. This is a sample description to be displayed in the poc only
                                and has nothing to do with the actual thing. Again, this is for testing purposes and is intended to
                                show how the text fits inside this box. This is a test only and so no need to verify the content. The goal
                                is to check how long text will fit to get an impression of the final look.
                            </p>
                        </div>
                    </div>
                </li>
                <li>
                    <div>
                        <img src="img/app_160.jpg">
                        <div>
                            <h1>BI Application Title Goes Here as a Sample</h1>
                            <p>
                                BI Application Description Goes here. This is a sample description to be displayed in the poc only
                                and has nothing to do with the actual thing. Again, this is for testing purposes and is intended to
                                show how the text fits inside this box. This is a test only and so no need to verify the content. The goal
                                is to check how long text will fit to get an impression of the final look.
                            </p>
                        </div>
                    </div>
                </li>
                <li>
                    <div>
                        <img src="img/app_160.jpg">
                        <div>
                            <h1>BI Application Title Goes Here as a Sample</h1>
                            <p>
                                BI Application Description Goes here. This is a sample description to be displayed in the poc only
                                and has nothing to do with the actual thing. Again, this is for testing purposes and is intended to
                                show how the text fits inside this box. This is a test only and so no need to verify the content. The goal
                                is to check how long text will fit to get an impression of the final look.
                            </p>
                        </div>
                    </div>
                </li>
                <li>
                    <div>
                        <img src="img/app_160.jpg">
                        <div>
                            <h1>BI Application Title Goes Here as a Sample</h1>
                            <p>
                                BI Application Description Goes here. This is a sample description to be displayed in the poc only
                                and has nothing to do with the actual thing. Again, this is for testing purposes and is intended to
                                show how the text fits inside this box. This is a test only and so no need to verify the content. The goal
                                is to check how long text will fit to get an impression of the final look.
                            </p>
                        </div>
                    </div>
                </li>
                <li>
                    <div>
                        <img src="img/app_160.jpg">
                        <div>
                            <h1>BI Application Title Goes Here as a Sample</h1>
                            <p>
                                BI Application Description Goes here. This is a sample description to be displayed in the poc only
                                and has nothing to do with the actual thing. Again, this is for testing purposes and is intended to
                                show how the text fits inside this box. This is a test only and so no need to verify the content. The goal
                                is to check how long text will fit to get an impression of the final look.
                            </p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div id="bi_reports">
            <h4>My BW Reports</h4>
            <div id="tree">

            </div>
        </div>
    </div>
</div>
<div id="bi_favorites_panel">
    <ul class="bi_news">
        <li>My Favorite Headline Goes Here</li>
        <li>My Favorite Headline Goes Here</li>
        <li>My Favorite Headline Goes Here</li>
        <li>My Favorite Headline Goes Here</li>
        <li>My Favorite Headline Goes Here</li>
        <li>My Favorite Headline Goes Here</li>
        <li>My Favorite Headline Goes Here</li>
        <li>My Favorite Headline Goes Here</li>
        <li>My Favorite Headline Goes Here</li>
        <li>My Favorite Headline Goes Here</li>
    </ul>
</div>
</body>
</html>
